<template>
    <div class="report-warp" @click="warpClick">
        <!-- 表格START -->
        <div class="report-table" :style="getTableBottom()">
            <div class="report-table-container" id="report-table-container" :style="gettableMinWidth()">
                <div class="report-thead" v-show="thead && thead.length>0">
                    <Row type="flex" justify="space-around">
                        <div class="checkboxWarp" v-for="(th, th_index) in thead" v-if="th.index" :style="th.width?'min-width:'+th.width:''">
                            <span class="index">{{th.displayName}}</span>
                        </div>
                        <Col span="1" v-for="(th, th_index) in thead" :key="th_index" :name="th.name" class="report-flex-col" v-if="!th.index" :style="th.width?'width:'+th.width:''">
                        <div class="report-table-th">
                            <span class="column-title" :title="th.displayName">{{th.displayName}}</span>
                             <span class="paixubox" v-if="th.sortFlage">
                                 <Icon type="android-arrow-dropup" class="arrowup" @click.native="paixuclick(th.name,'DESC')"/>
                                 <Icon type="android-arrow-dropdown" class="arrowdown" @click.native="paixuclick(th.name,'ASC')"/>
                            </span>
                        </div>
                        </Col>
                    </Row>
                </div>
                <div class="report-tdata" v-if="tdata && tdata.length > 0">
                    <div class="report-row" v-for="(td, index) in tdata" :key="index" @click.stop="clickRow($event, td, index)" :class="{ 'active' : rowClickedIndex === index }">
                        <Row type="flex" justify="space-around">
                            <div class="checkboxWarp" v-for="(th, th_index) in thead" v-if="th.index" :style="th.width?'min-width:'+th.width:''">
                                <span class="index">{{index+1}}</span>
                            </div>
                            <Col span="1" v-for="(th, index_th) in thead" :key="index_th" class="report-flex-col" v-if="!th.index" :style="th.width?'width:'+th.width:''">
                            <div class="report-flex-col_div" :title="td[th.name]">
                                <span>{{ td[th.name] }}</span>
                            </div>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div v-if="initShow" class="reportTablenodata">
                    <div class="alert">
                        <i></i> 请设置条件，点击【
                        <span style="cursor:pointer;">查询</span>】生成报表
                    </div>
                </div>
                <!-- 暂无数据 -->
                <div v-if="!loading && !initShow && tdata.length < 1" class="reportTablenodata">
                    <div class="report-nodata alert">
                        <i></i> 暂无数据
                    </div>
                </div>
            </div>
            <!-- 加载中START -->
            <div class="c-loadingwarp" v-if="loading">
                <div class="c-gridTableloading">
                    <div class="c-gridTableDemo-spin-col">
                        <Spin fix>
                            <Icon type="load-c" size=22 class="c-demo-spin-icon-load"></Icon>
                            <div>正在加载</div>
                        </Spin>
                    </div>
                </div>
            </div>
        </div>
        <!-- 分页START -->
        <div class="report-tfoot" v-if="pagerData.isPage">
            <Row>
                <div class="clear"></div>
                <div class="totalCount">当前第 {{pagerData.startRow}} 到第 {{pagerData.endRow}} 条，共 {{pagerData.total}} 条</div>
                <Page ref="refPager" :current='pagerData.current' :total="pagerData.total" :pageSize="pagerData.rows" class="pager" show-sizer :pageSizeOpts="rowOptions" placement="top" show-elevator @on-change="pageChange" @on-page-size-change="rowChange"></Page>
            </Row>
        </div>
        <!-- 分页END -->
    </div>
</template>
<script>
import Vue from 'vue'

import Rest from '@/rest'
import Helper from '@/common/helper'
//import Bus from '@/store/bus'

export default {
    data() {
        return {
            nodata: false,
            rowClickedIndex: null,
            thead: [],
            current: 1,
            rowOptions: [10, 15, 30, 50] // 每页条数切换的配置
        }
    },
    methods: {
        paixuclick(name,style){
            this.$emit('paixuCallback', name,style);
        },
        init() {
            var that = this;
            that.thead = that.tableParmes.thead;
        },
        pageChange(page) {
            var that = this;
            that.pagerData.page = page;
            that.$emit('updataList', that.pagerData);
        },
        rowChange(rows) {
            var that = this;
            that.pagerData.rows = rows;
            this.$emit('updataList', that.pagerData);
        },
        // 点击行
        clickRow(e, rowData, index) {
            e.stopPropagation()
            this.rowClickedIndex = index
            this.$emit('clickRow', rowData, index)
        },
        warpClick() {
            this.rowClickedIndex = null;
        },
        gettableMinWidth() {
            var that = this;
            if (that.tableParmes.tableMinWidth) {
                return 'min-width:' + that.tableParmes.tableMinWidth;
            } else {
                var thlen = that.tableParmes.thead.length;
                var width = 0;
                var minwidth = 900;
                for (var i = 0; i < thlen; i++) {
                    width += 200;
                }
                if (minwidth >= width) {
                    width = minwidth;
                }
                return 'min-width:' + width + 'px';
            }
        },
        getTableBottom() {
            var that = this;
            if (that.pagerData.isPage) {
                return 'bottom:' + '58px';
            } else {
                return 'bottom:' + '-40px';
            }
        }
    },
    created() {
        this.loading = false;
    },
    computed: {},
    props: {
        tableParmes: {
            type: Object,
            default: function() {
                return {
                    thead: [],
                    tableMinWidth: '',
                }
            }
        },
        tdata: {
            type: Array,
            default: []
        },
        modalTbale: {
            type: Boolean,
            default: false
        },
        pagerData: {
            type: Object,
            default: function() {
                return {
                    current: 1,
                    page: 1, // 第几页
                    rows: 15, // 每页15条
                    startRow: 1, // 起始条数
                    endRow: 15, // 结束条数
                    total: 0, // 总数据量
                    lastPage: false, // 是否已经是最后一页
                    isPage: false //是否分页
                }
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        initShow: {
            type: Boolean,
            default: true
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../assets/sass/install";
.paixubox {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}
.arrowup, .arrowdown {
    display: block;
    font-size: 19px;
    font-weight: bold;
    height: 10px;
    width: 7px;
}
.report-warp {
    position: relative;
    height: 100%;
    width: 100%;
    .report-table {
        position: absolute;
        top: 0px;
        right: 0;
        left: 0;
        bottom: 0;
        border: 1px solid $thBorderColor;
        background: url(../../assets/images/grid-bg.png) repeat 0 0;
        @include overflowCss();
        overflow-x: auto;
        overflow-y: hidden;
        .report-table-container {
            background-color: white;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0px;
            padding-top: 48px;
            /*min-width: 1020px;*/
            .checkboxWarp {
                min-width: 100px;
                text-align: left;
                height: 40px;
                line-height: 40px;
                padding-left: 15px;
                color: #8c8b8b;
            }
        }
        .report-thead {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            padding-right: 10px;
            &:after{
                position:absolute;
                right: 0;
                top: 0;
                content:'';
                width: 10px;
                height: 40px;
                background-color: #f5f5f5;     
                border-bottom: 1px solid #ddd;           
            };
            /*z-index: 1;*/
            &:hover {
                .ivu-col {
                    .report-filter-container {
                        display: inline-block;
                    }
                }
            }
            .ivu-col {
                height: 40px;
                line-height: 40px;
                background-color: $thBG;
                border-bottom: 1px solid $thBorderColor;
                text-align: left;
                cursor: pointer;
                padding-left: 13px;
                &.last-child {
                    border-left: 1px solid $thBorderColor;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .report-filter-container {
                    display: inline-block;
                    padding: 0 8px;
                }
                .setting {
                    display: inline-block;
                    width: 21px;
                    height: 21px;
                }
                .index {
                    color: #666666;
                    font-weight: bold;
                }
                .report-table-th {
                    height: 100%;
                    position: relative;
                    .column-title {
                        display: inline-block;
                        vertical-align: top;
                        color: #666666;
                        font-weight: bold;
                        max-width: 100%;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
            .report-flex-col {
                flex-grow: 1;
            }
            .checkboxWarp {
                background-color: #f5f5f5;
                border-bottom: 1px solid #d5d5d5;
                font-weight: bold;
                color: #666666;
            }
        }
        .report-tdata {
            overflow-y: scroll;
            position: absolute;
            left: 0;
            right: 0;
            top: 40px;
            bottom: 0;
            background: url(../../assets/images/grid-bg.png) repeat 0 0;
            background-size: 1px 41px;
            .report-row {
                background-color: white;
                border-bottom: 1px solid $tdBorderColor;
                @include transition(500ms, background-color);
                cursor: pointer;
                &.active {
                    background-color: $tdBorderColor;
                }
                &:last-child {
                    border-bottom: none;
                }
                &:hover {
                    background-color: $tdBorderColor;
                }
                .report-flex-col_hover {
                    color: #02b0f0;
                    .report-flex-col_div {
                        display: flex;
                        cursor: pointer;
                        height: 40px;
                        align-items: center;
                    }
                }
                .tip_icon {
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: 1px;
                    width: 18px;
                    height: 20px;
                    background: url(../../assets/images/icons.png) no-repeat -461px -1045px;
                }
            }
            .report-row_nocursor {
                cursor: default;
            }
            .ivu-col {
                height: 40px;
                padding-left: 13px;
                color: #8c8b8b;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                span {
                    display: inline-block;
                    vertical-align: middle;
                    max-width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    padding-right: 10px;
                }
            }
            .report-flex-col {
                flex-grow: 1;
                overflow: hidden;
                .report-flex-col_div {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    padding-right: 10px;
                }
            }

            @include overflowCss();
        }
        .reportTablenodata {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            color: #8f8f8f;
            .alert {
                text-align: center;
                position: fixed;
                width: 240px;
                left: 50%;
                top: 50%;
                margin-left: -10px;
                margin-top: -50px;
                i {
                    display: block;
                    width: 78px;
                    height: 90px;
                    border-radius: 50px;
                    margin: 0 auto;
                    background: url(../../assets/images/customer_icons.png) no-repeat -218px -490px;
                    margin-bottom: 5px;
                }
            }
            .report-nodata {
                i {
                    background: url(../../assets/images/customer_icons.png) no-repeat -138px -492px;
                }
            }
            .modalAlert {
                margin-left: -120px;
            }
        }
    }
}

.report-tfoot {
    width: 100%;
    position: absolute;
    left: 0;
    right: 20px;
    bottom: 10px;
    height: 49px;
    .ivu-row {
        border: 1px solid $thBorderColor;
        padding: 8px 15px;
        background-color: #fff;
    }
    .clear {
        display: inline-block;
        height: 32px;
        line-height: 32px;
    }
    .totalCount {
        position: fixed;
        height: 32px;
        line-height: 32px;
        display: inline-block;
        vertical-align: top;
        color: #657180;
    }
    .pager {
        display: inline-block;
        vertical-align: top;
        position: absolute;
        right: 20px;
        background-color: #fff;
        padding-left: 50px;
    }
}
</style>